<template>
  <div class="shop-info">
          <section class="section">
            <h3 class="section-title">活动与服务</h3>
            <div class="activity-activities">
              <div v-for="(activity,index) in shop.activities" :key="index" class="activity-container activity-containerWrap activity-activity"><i class="activity-activityIcon" :style="{'background-color': '#' + activity.icon_color, color: '#fff'}"><span>{{activity.icon_name}}</span></i>                <span class="activity-description">{{activity.description}}</span></div>

              <div v-for="(support,index) in shop.supports" :key="index" class="activity-container activity-containerWrap activity-activity"><i class="activity-activityIcon activity-hollow" :style="{color: '#'+support.icon_color}"><span v-text="support.icon_name"></span></i>
                <span class="activity-description">{{support.description}}</span>
              </div>
            </div>
          </section>
          <div>
            <section class="section">
              <h3 class="section-title">商家信息</h3>
              <ul class="detail-list">
                <li>{{shop.description}}</li>
                <li><span>商家电话</span> <span><span>{{shop.phone}}</span>
                  <svg class="arrow-right">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                  </svg>
                  </span>
                </li>
                <li><span>地址</span> <span>{{shop.address}}</span></li>
                <li><span>营业时间</span> <span>{{openingHours}}</span></li>
              </ul>
            </section>
            <section class="section"><a href="https://h5.ele.me/shop/certification/#/?restaurant_id=7391419853212564&amp;realId=150107564" class="section-title detail-license-title_JIAxP_0">营业执照<svg class="arrow-right"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use></svg></a></section>
          </div>
        </div>

</template>
<script>
  export default {
    name: 'ShopInfo',
    data () {
      return {
      }
    },
    props: {
      shop: {
        type: Object
      }
    },
    mounted () {
      this.$el.style.height = (window.innerHeight - 127) + 'px'
    },
    computed: {
      openingHours: function () {
        if (this.shop.opening_hours && this.shop.opening_hours.length > 0) {
          return this.shop.opening_hours[0].replace('/', '-')
        } else {
          return null;
        }
      },
      logoURL: function () {
        if (this.shop.image_path) {
            return 'https://fuss10.elemecdn.com/9/ec/' + this.shop.image_path.substring(3) + '.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/'
        }
      },
      headerStyle: function () {
        if (this.shop.image_path) {
          //background-image: url("https://fuss10.elemecdn.com/9/ec/1f13f62196de7301242a6cebbc8e0png.png?imageMogr/format/webp/thumbnail/!40p/blur/50x40/");
          return 'background-image: url("https://fuss10.elemecdn.com/9/ec/' + this.shop.image_path.substring(3) + '.png?imageMogr/format/webp/thumbnail/!40p/blur/50x40/");'
        }
      }
    }
  }
</script>
<style></style>
